<template>
    <div class="commanddispatch">
        <div class="contanerleft">
            <div class="warningstatic">
                <div class="text">预警统计</div>
                <div class="bigImg">
                    <div class="imgItem" v-for="item in imgitems" :key="item.name">
                        <img :src="item.img" alt="">
                        <div class="number" :style="{ color: item.color }">{{ item.number }}</div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="warningdispatch">
                <div class="text">预警调度</div>
                <div class="warningbg">
                    <div class="left">
                        <div class="titleinfo" v-for="item in warninginfos" :key="item.deviceName">
                            <div class="titleitem">
                                <div class="lefttitle">预警等级</div>
                                <div class="righttext">{{ item.warnLevel }}</div>
                            </div>
                            <div class="titleitem">
                                <div class="lefttitle">设备类型</div>
                                <div class="righttext">{{ item.sensorType }}</div>
                            </div>
                            <div class="titleitem">
                                <div class="lefttitle">预警状态</div>
                                <div class="righttext">{{ item.warnState ? '已处理预警' : '未处理预警' }}</div>
                            </div>
                            <div class="titleitem">
                                <div class="lefttitle">发布时间</div>
                                <div class="righttext">{{ item.warnTime }}</div>
                            </div>
                        </div>
                        <div class="content">
                            <div class="leftcontent">预警内容</div>
                            <div class="rightcontent"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="viocedispatch">
                            <img src="@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/语音调度.png" alt="语音调度">
                            <div style="font-size: 12px;font-family: Source Han Sans CN;font-weight: 400;color: #07F6FF;">
                                语音调度
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rainfall" style="pointer-events: all;cursor: pointer;">
                <div class="bigbox">
                    <div class="raintype">
                        <div class="box">
                            <ul class="titletypes">
                                <li>设备名称</li>
                                <li>1h降雨量</li>
                                <li>3h降雨量</li>
                                <li>6h降雨量</li>
                                <li>12h降雨量</li>
                                <li>24h降雨量</li>
                            </ul>
                            <ul class="item" v-for="(item, i) in rainfallList" :key="i">
                                <li>
                                    <span>{{ item.deviceName }}</span>
                                    <span>{{ item.rain1h }}</span>
                                    <span>{{ item.rain3h }}</span>
                                    <span>{{ item.rain6h }}</span>
                                    <span>{{ item.rain12h }}</span>
                                    <span>{{ item.rain24h }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="containerright" style="pointer-events: all;">
            <div class="type">
                <dropDown :inputname="types.monitortype"></dropDown>
                <dropDown :inputname="types.warning"></dropDown>
                <dropDown :inputname="types.information"></dropDown>
                <el-input v-model="monitorname" placeholder="监测点名称"></el-input>
            </div>
            <div class="date">
                <div class="starttime">
                    <div class="block">
                        <el-date-picker type="date" placeholder="开始时间">
                        </el-date-picker>
                    </div>
                </div>
                <div class="endtime">
                    <div class="starttime">
                        <div class="block">
                            <el-date-picker type="date" placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <button>查询</button>
                </div>
            </div>
            <div class="static">
                <div ref="warninglevel" class="itemone item" @click="changeImg4">预警等级统计</div>
                <div ref="warningstate" class="itemtwo item" @click="changeImg5">预警状态统计</div>
                <div ref="monitorwarningstate" class="itemthree item" @click="changeImg6">监测点预警状态统计</div>
            </div>
            <div class="pie">
                <pie></pie>
            </div>
            <div class="info">
                <div class="title">
                    <div class="item" v-for="(item, i) in rightbottomTypes" :key="i">{{ item.name }}</div>
                </div>
                <ul class="infobottom">
                    <li v-for="(item, i) in warnList" :key="i">
                        <span style="font-size:smaller">{{ item.monitorName }}</span>
                        <span>{{ item.monitorType }}</span>
                        <span>{{ item.noticeState ? '已发送' : '未发送' }}</span>
                        <span style="font-size:smaller">{{ item.warnTime }}</span>
                        <span>{{ item.warnState ? '已处理' : '未处理' }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import dropDown from './components/dropDown.vue';
import pie from './components/pie/index.vue';
import commanddispatch from '@/api/commanddispatch'
export default {
    name: '',
    data() {
        return {
            //预警统计信息
            imgitems: [
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/总计.png'), name: '总计', number: '0', color: '#CDF1FF' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/蓝色预警.png'), name: '蓝色预警', number: '0', color: '#0096FF' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/黄色预警.png'), name: '黄色预警', number: '0', color: '#FFD200' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/橙色预警.png'), name: '橙色预警', number: '0', color: '#FF8E09' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/红色预警.png'), name: '红色预警', number: '0', color: '#FF4A54' }
            ],
            //预警调度信息
            warninginfos: {

            },
            //输入框监测点名称
            monitorname: '',
            //右侧侧边栏头部类型
            types: {
                monitortype: '设备类型',
                warning: '预警等级',
                information: '消息状态'
            },
            //右侧边栏下部信息类型
            rightbottomTypes: [
                { name: '监测点名称' },
                { name: '监测类型' },
                { name: '发送状态' },
                { name: '预警时间' },
                { name: '预警状态' }
            ],
            // 指挥调度预警列表
            warnList: [],
            //降雨量列表
            rainfallList: []

        };
    },
    components: {
        dropDown,
        pie
    },
    created() {
        this.$nextTick(() => {
            commanddispatch.warnstatics()
                .then(res => {
                    // console.log(res);
                    let arr = this.primarys(res.data);
                    let newArr = arr.map((item, i) => {
                        if (item.name == 'red') {
                            return {
                                img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/红色预警.png'),
                                name: '红色预警',
                                number: item.number,
                                color: item.name,
                            }
                        } else if (item.name == 'orange') {
                            return {
                                img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/橙色预警.png'),
                                name: '橙色预警',
                                number: item.number,
                                color: item.name
                            }
                        } else if (item.name == 'total') {
                            return {
                                img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/总计.png'),
                                name: '总计',
                                number: item.number,
                                color: item.name
                            }
                        } else if (item.name == 'blue') {
                            return {
                                img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/蓝色预警.png'),
                                name: '蓝色预警',
                                number: item.number,
                                color: item.name
                            }
                        } else if (item.name == 'yellow') {
                            return {
                                img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/黄色预警.png'),
                                name: '黄色预警',
                                number: item.number,
                                color: item.name
                            }
                        }
                    })
                    let obj = {}
                    newArr.forEach((item, i) => {
                        if (item.name == '总计') {
                            obj = item;
                            newArr.splice(i, 1);
                            return
                        }
                    })
                    newArr.unshift(obj);
                    console.log(newArr);
                    this.imgitems = newArr
                })
            commanddispatch.warnDispatch()
                .then(res => {
                    // console.log(res);
                    let arr = res.data
                    arr.forEach((item, i) => {
                        if (item.warnLevel == 0) {
                            item.warnLevel = '红色预警'
                        } else if (item.warnLevel == 1) {
                            item.warnLevel = '橙色预警'
                        } else if (item.warnLevel == 2) {
                            item.warnLevel = '黄色预警'
                        } else if (item.warnLevel == 3) {
                            item.warnLevel = '蓝色预警'
                        }
                    });
                    // console.log(arr);
                    this.warninginfos = arr
                })
            // 请求预警调度下拉列表
            commanddispatch.warndeviceList()
                .then(res => {
                    // console.log(res);
                    this.warnList = res.data.warnList
                })
            // 请求降雨量查询
            commanddispatch.getrainfalldata()
                .then(res => {
                    // console.log(res);
                    this.rainfallList = res.data;
                    console.log(this.rainfallList);
                })
            commanddispatch.devicemponitortype()
            .then(res =>{
                console.log(res);
            })
        })
    },
    mounted() {

    },
    methods: {
        changeImg4() {
            let img1 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2选中.png')
            let img2 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2默认.png')
            this.$refs.warninglevel.style.background = `url(${img1})`
            this.$refs.warningstate.style.background = `url(${img2})`
            this.$refs.monitorwarningstate.style.background = `url(${img2})`
        },
        changeImg5() {
            let img1 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2选中.png')
            let img2 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2默认.png')
            this.$refs.warninglevel.style.background = `url(${img2})`
            this.$refs.warningstate.style.background = `url(${img1})`
            this.$refs.monitorwarningstate.style.background = `url(${img2})`
        },
        changeImg6() {
            let img1 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2选中.png')
            let img2 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2默认.png')
            this.$refs.warninglevel.style.background = `url(${img2})`
            this.$refs.warningstate.style.background = `url(${img2})`
            this.$refs.monitorwarningstate.style.background = `url(${img1})`
        },
        //对原始对象进行封装
        primarys(obj) {
            let keyArr = Object.keys(obj);
            let valueArr = Object.values(obj);
            let newArr = keyArr.map((item, i) => {
                return {
                    name: keyArr[i],
                    number: valueArr[i],
                }
            })
            return newArr
        }
    }
}
</script>
<style scoped lang="less">
.commanddispatch {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 900px;
    top: 148px;

    .contanerleft {
        width: 30%;
        margin-left: 30px;
        pointer-events: all;

        .warningstatic {
            width: 440px;
            height: 170px;
            background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/预警统计-框.png) no-repeat center;
            background-size: 100% 100%;

            .text {
                font-size: 20px;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 47px;
                text-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
                margin-left: -322px;
                display: inline-block;
            }

            .bigImg {
                display: flex;

                .imgItem {
                    width: 20%;

                    img {
                        width: 60px;
                        height: 60px;
                    }

                    .number {
                        font-size: 18px;
                        font-family: DIN;
                        font-weight: bold;
                        color: #CDF1FF;
                        line-height: 25px;
                    }

                    .name {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 25px;
                    }
                }
            }
        }

        .warningdispatch {
            width: 440px;
            height: 370px;
            background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/预警调度-框.png) no-repeat center;
            background-size: 100% 100%;
            margin-top: 20px;

            .text {
                font-size: 20px;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 47px;
                text-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
                margin-left: -322px;
                display: inline-block;
            }

            .warningbg {
                width: 409px;
                height: 140px;
                overflow: auto;
                background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/bj预警调度.png) no-repeat center;
                background-size: 100% 100%;
                margin: 13px auto;
                display: flex;

                &::-webkit-scrollbar-track {
                    background: #004B62;
                    opacity: 0.3;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background: #176677;
                    border-radius: 3px;
                    transition: color 0.2s ease;
                }

                .left {
                    width: 88%;
                    display: flex;
                    flex-wrap: wrap;
                    height: auto;

                    .titleinfo {
                        width: 100%;
                        height: 30px;
                        display: flex;
                        flex-wrap: wrap;

                        .titleitem {
                            width: 50%;
                            display: flex;

                            .lefttitle {
                                font-size: 12px;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #07F6FF;
                                line-height: 36px;
                            }

                            .righttext {
                                font-size: 12px;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: white;
                                line-height: 36px;
                                margin-left: 4px;
                            }
                        }

                    }

                    .content {
                        display: flex;

                        .leftcontent {
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #07F6FF;
                            line-height: 36px;
                            white-space: nowrap;
                        }

                        .rightcontent {
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 18px;
                            text-align: left;
                            margin-left: 5px;
                        }
                    }
                }

                .right {
                    width: 12%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;


                    .viocedispatch {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }

        .rainfall {
            width: 440px;
            height: 320px;
            background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/1小时降水-框\ 3.png) no-repeat center;
            background-size: 100% 100%;
            margin-top: 20px;
            padding-right: 20px;
            box-sizing: border-box;

            .bigbox {
                width: 100%;
                height: 100%;
                overflow: auto;

                &::-webkit-scrollbar-track {
                    background: #004B62;
                    opacity: 0.3;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background: #176677;
                    border-radius: 3px;
                    transition: color 0.2s ease;
                }
            }




            .raintype {
                display: flex;
                width: 100%;
                height: auto;
                justify-content: center;
                align-items: center;



                .box {
                    width: 100%;
                    padding: 10px;
                    box-sizing: border-box;

                    .titletypes {
                        width: 100%;
                        display: flex;
                        justify-content: space-around;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        opacity: 0.5;
                        color: #FFFFFF;
                        margin-bottom: 5px;
                    }

                    .item {

                        li {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            background: #005A64;
                            border-radius: 4px;
                            margin-bottom: 8px;
                            font-size: 14px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #FFFFFF;



                            span {
                                width: 16%;
                            }
                        }
                    }
                }


            }

            .rainshow {
                width: 100%;
                height: calc(100% - 50px);
            }

        }
    }

    .containerright {
        width: 440px;
        height: 900px;
        background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/指挥调度右边框\ 3.png) no-repeat center;
        background-size: 100% 100%;
        margin-right: 30px;

        .type {
            display: flex;
            justify-content: space-around;
            margin-top: 19px;

            .el-input {
                height: 30px;
                width: 120px;
                border: 1px solid #2C99AE;

                /deep/ .el-input__inner {
                    border: none;
                    height: 30px;
                    background-color: rgba(0, 0, 0, 0);
                }
            }

        }

        .date {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;

            .starttime {
                .block {
                    text-align: start;

                    .el-input {
                        width: 140px;
                        height: 30px;

                        /deep/ input {
                            height: 30px;
                            background: rgba(0, 90, 100, 0);
                            border: 1px solid #2C99AE;

                            &::placeholder {
                                color: #FFFFFF;
                            }
                        }

                        /deep/ .el-input__prefix {
                            display: inline-block;
                            left: auto;
                            right: 5px;

                            .el-input__icon {
                                line-height: 30px;
                            }
                        }
                    }
                }

            }

            .btn {
                width: 120px;
                height: 30px;

                button {
                    width: 100%;
                    height: 100%;
                    background: #00A77E;
                    font-size: 18px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 30px;
                    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
                }
            }
        }

        .static {
            display: flex;
            margin-top: 31px;
            justify-content: space-around;

            .item {
                color: #FFFFFF;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                line-height: 30px;
                cursor: pointer;
            }

            .itemone {
                width: 101px;
                height: 30px;
                background-image: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2选中.png);
                background-size: 100% 100%;
            }

            .itemtwo {
                width: 101px;
                height: 30px;
                background-image: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2默认.png);

            }

            .itemthree {
                width: 141px;
                height: 30px;
                background-image: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/标签2默认.png);
            }
        }

        .pie {
            display: flex;
            justify-content: center;
            align-content: center;

            /deep/ .highcharts-background {
                opacity: 0;
            }
        }

        .info {
            height: 430px;
            overflow: auto;

            &::-webkit-scrollbar-track {
                background: #004B62;
                opacity: 0.3;
                border-radius: 3px;
            }

            &::-webkit-scrollbar {
                -webkit-appearance: none;
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                cursor: pointer;
                background: #176677;
                border-radius: 3px;
                transition: color 0.2s ease;
            }

            .title {
                display: flex;
                justify-content: space-around;
                margin-bottom: 5px;

                .item {
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #9B9B9B;
                }
            }

            .infobottom {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                li {
                    width: 420px;
                    height: 30px;
                    background: #005A64;
                    border-radius: 4px;
                    margin-bottom: 12px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #FFFFFF !important;


                    span {
                        width: 20%;

                    }
                }
            }
        }
    }
}
</style>